<style lang="less" scoped src="../public.less"></style>
<script src="./trainingmanagement.js"></script>

<template>
    <div>
        <Row style="font-size: 15px;">
            <Col span="24">
            订单号：
            <Input v-model="queryData.billCode" clearable style="width: 15%"></Input>
            学生姓名：
            <Input v-model="queryData.studentName" clearable style="width: 15%"></Input>
            班级名称：
            <Input v-model="queryData.className" clearable style="width: 15%"></Input>
            家长号码：
            <Input v-model="queryData.parentPhone" clearable style="width: 15%"></Input>
            </Col>
            <Col span="24">
            状态：
            <Select v-model="queryData.status" style="width:15%">
                <Option :value='1'>待缴费</Option>
                <Option :value='2'>已缴费</Option>
                <Option :value='3'>申请退款</Option>
                <Option :value='4'>已退款</Option>
                <Option :value='5'>已失效</Option>
            </Select>
            学年：
            <Select v-model="queryData.classYear" style="width:15%" filterable clearable>
                <Option :value='2016'>2016</Option>
                <Option :value='2017'>2017</Option>
                <Option :value='2018'>2018</Option>
            </Select>
            学期：
            <Select v-model="queryData.classSeason" style="width:15%" filterable clearable>
                <Option v-for="item in classSeasonList" :key="item.id" :value="item.id">{{item.name}}</Option>
            </Select>
            所在区域：
            <Select v-model="queryData.areaId" style="width:15%" filterable clearable>
                <Option v-for="item in areaList" :key="item.id" :value="item.id">{{item.name}}</Option>
            </Select>
            </Col>
        </Row>
        <Row style="font-size: 15px;;margin-top: 5px">
            <Col span="22">
            <span @click="loadList"><Button type="primary" icon="android-search">查询</Button></span>
            <span @click="refresh"><Button type="primary" icon="refresh">清空</Button></span>
                <span @click="exportVisible=true"><Button type="primary" icon="edit">导出数据</Button></span>
            </Col>
        </Row>
        <div class="main-table">
            <Table border :columns="columns" :data="dataList"></Table>
        </div>
        <div class="pagination">
            <Page :total="total" size="small" :page-size="pageSize" :current.sync="pageIndex" @on-change="loadList"
                  show-total show-elevator></Page>
        </div>

        <Modal v-model="chargeDetailVisable"
               title="缴费管理"
               width="90%"
               :mask-closable="false">
            <h3>学生信息</h3>
            <Row class="table-Row">
                <Col span="3" class="table-row-title">姓名：</Col>
                <Col span="3" class="table-row-content">{{orderDetails.name}}</Col>
                <Col span="3" class="table-row-title">性别：</Col>
                <Col span="3" class="table-row-content">{{orderDetails.sex}}</Col>
                <Col span="3" class="table-row-title">出生日期：</Col>
                <Col span="3" class="table-row-content">{{orderDetails.birthdate}}</Col>
                <Col span="3" class="table-row-title">身份证号：</Col>
                <Col span="3" class="table-row-content">{{orderDetails.cardcode}}</Col>
            </Row>
            <Row class="table-Row">
                <Col span="3" class="table-row-title">家长姓名：</Col>
                <Col span="3" class="table-row-content">{{orderDetails.parentname}}</Col>
                <Col span="3" class="table-row-title">家长手机：</Col>
                <Col span="3" class="table-row-content">{{orderDetails.parentphone}}</Col>
                <Col span="3" class="table-row-title">是否新生：</Col>
                <Col span="3" class="table-row-content"></Col>
            </Row>
            <h3>班级信息</h3>
            <Row class="table-Row">
                <Col span="3" class="table-row-title">班级：</Col>
                <Col span="3" class="table-row-content">{{orderDetails.class_name}}</Col>
                <Col span="3" class="table-row-title">班级代码：</Col>
                <Col span="3" class="table-row-content">{{orderDetails.class_code}}</Col>
                <Col span="3" class="table-row-title">学年：</Col>
                <Col span="3" class="table-row-content">{{orderDetails.class_year}}</Col>
                <Col span="3" class="table-row-title">学期：</Col>
                <Col span="3" class="table-row-content">{{orderDetails.class_season_name}}</Col>
            </Row>
            <Row class="table-Row">
                <Col span="3" class="table-row-title">专业：</Col>
                <Col span="3" class="table-row-content">{{orderDetails.marjor_name}}</Col>
                <Col span="3" class="table-row-title">专业程度：</Col>
                <Col span="3" class="table-row-content">{{orderDetails.marjor_level_name}}</Col>
                <Col span="3" class="table-row-title">年级阶段：</Col>
                <Col span="3" class="table-row-content">{{orderDetails.class_school_grade_name}}</Col>
                <Col span="3" class="table-row-title">年龄范围：</Col>
                <Col span="3" class="table-row-content">{{orderDetails.class_season_name}}</Col>
            </Row>
            <Row class="table-Row">
                <Col span="3" class="table-row-title">负责教师：</Col>
                <Col span="3" class="table-row-content">{{orderDetails.teacher_name}}</Col>
                <Col span="3" class="table-row-title">开课时间：</Col>
                <Col span="3" class="table-row-content">{{orderDetails.class_startTime}}</Col>
                <Col span="3" class="table-row-title">课程安排：</Col>
                <Col span="9" class="table-row-content" v-html="orderDetails.classSchedules"></Col>
            </Row>
            <Row class="table-Row">
                <Col span="3" class="table-row-title">课次：</Col>
                <Col span="3" class="table-row-content">{{orderDetails.class_no}}</Col>
                <Col span="3" class="table-row-title">录取方式：</Col>
                <Col span="3" class="table-row-content">{{orderDetails.class_apply}}</Col>
            </Row>
            <Row class="table-Row">
                <Col span="3" class="table-row-title">总费用：</Col>
                <Col span="3" class="table-row-table-row-content">{{orderDetails.amt}}</Col>
            </Row>
            <h3>收费信息</h3>
            <Table border :columns="charge_columns_1" :data="charge_dataList"></Table>
            <div style="margin-top:20px;display: flex;">
                <h1>收费合计:<span style="color: red">{{orderDetails.amt}}</span></h1>
                <h1 style="margin-left: 20px">打折金额:<span style="color: red">{{orderDetails.discount_amt}}</span></h1>
                <h1 style="margin-left:20px"> 实收合计:<span style="color: red">{{orderDetails.real_amt}}</span></h1>
                <h1 style="margin-left:20px"> 退费合计：<span style="color: red">{{orderDetails.refund_amt}}</span></h1>
            </div>
            <div style="text-align: center">
                    <Button type="error" @click="showRefund">退费</Button>
                    <Button type="error" @click="">返回</Button>
            </div>
        </Modal>


        <Modal v-model="chargeRefundVisable"
               title="退费"
               width="50%"
               :mask-closable="false"
        >
            <h3>费用信息</h3>
            <div style="margin-top: 15px;">
                <Table border :columns="charge_columns_2" :data="charge_dataList"></Table>
            </div>
            <div slot="footer">
                <Button type="text" size="large" @click="chargeRefundVisable=false">取消</Button>
                <Button type="primary" size="large" @click="doRefund" :disabled="refundFlag">确定</Button>
            </div>
        </Modal>

        <Modal v-model="exportVisible"
               title="导出"
               width="50%"
               :mask-closable="false"
               ok-text="导出"
        cancel-text="关闭"
        @on-ok="doExport"
               :loading="true">
            <div style="text-align: center">
                <h3 style="color: red;">请选择导出条件,如果不选择则导出全部数据</h3>
            </div>
                <Form style="margin-top: 20px;" :label-width="100">
                        <FormItem label="订单创建时间:">
                             <Row>
                                 <Col span="9">
                                     <FormItem>
                                         <DatePicker type="datetime" placeholder="开始时间" style="width:200px" v-model="exportData.startTime"></DatePicker>
                                     </FormItem>
                                 </Col>
                                 <Col span="2" style="text-align: center">--</Col>
                                 <Col span="9">
                                     <FormItem>
                                         <DatePicker type="datetime" placeholder="结束时间" style="width: 200px" v-model="exportData.endTime"></DatePicker>
                                     </FormItem>
                                 </Col>
                             </Row>
                        </FormItem>
                    <FormItem label="订单状态:">
                        <Row>
                            <Col span="9">
                                <Select  style="width:200px" v-model="exportData.status">
                                    <Option :value='1'>待缴费</Option>
                                    <Option :value='2'>已缴费</Option>
                                    <Option :value='3'>申请退款</Option>
                                    <Option :value='4'>已退款</Option>
                                    <Option :value='5'>已失效</Option>
                                </Select>
                            </Col>
                        </Row>
                    </FormItem>
                </Form>
        </Modal>


        <Modal v-model="invoiceModel"
               title="查看发票"
               width="50%"
               :mask-closable="false"
        >
            <div id="print-area">
                <img :src="invoicePath"/>
            </div>
        </Modal>
        </div>

</template>
